<template>
  <div
    class="nav-bar"
    @click="getActiveTab">
    <span
        v-for="item in menuItems"
        :key="item.path"
        :data-tab = "item.name"
        :class="{active: item.name === tab}">{{item.name}}</span>

  </div>
</template>

<script>
export default {
  name: 'Navbar',
  data () {
    return {
      tab: '工况数据',
      menuItems: [
        { name: '工况数据', path: '/summary' },
        { name: '视频监测', path: '/monitor' },
        { name: '数据统计', path: '/statistic' },
        { name: '信息录入', path: '/record' },
        { name: '导向轨迹', path: '/track' }]
    }
  },
  methods: {
    getActiveTab (event) {
      this.tab = event.target.dataset.tab
      const menuItem = this.menuItems.find(item => item.name === this.tab)
      this.$router.push(menuItem.path)
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar{
    display: flex;
    // flex-direction: column;

    // width: 40px;
    height: 100%;
    span{
        box-sizing: border-box;
        padding: .625rem 0;
        min-width: 6.25rem;
        height: 2.375rem;
        border-radius: .25rem;

        text-align: center;
        font-size: 1.125rem;
        color: #fff;
        cursor: pointer;
    }

    .active{
        background-color: royalblue;
    }
}
</style>
